import React, { useState, useRef, useEffect } from 'react';
import { EdrmsTypeAndStorageStyled } from './style';
import { EdrmsTypeAndStorageDto } from '@/services/types';
import { getEdrmsTypeAndStorageDetail } from '@/services/index';
import * as echarts from 'echarts/core';
type EdrmsTypeAndStorageType = {}
const EdrmsTypeAndStorage: React.FC<EdrmsTypeAndStorageType> = () => {

  const [edrmsTypeAndStorage, setEdrmsTypeAndStorage] = useState<EdrmsTypeAndStorageDto[]>([])

  useEffect(() => {
    console.log(1111)
    getEdrmsTypeAndStorageDetail().then(res => {
      res && setEdrmsTypeAndStorage(res);
      // console.log(res.map(item => item.storge))
    })
  }, [])

  const chartRef = useRef(null);
  const colors = ['#ffffff', '#ffffff'];
  let option = {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      right: '20%'
    },

    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: false
        },
        // prettier-ignore
        data: edrmsTypeAndStorage.slice(0,5).map(item => item.name),
        splitLine: {
          show: false // 不显示网格线
        },
      }
    ],
    legend: {
      textStyle: {
        color: '#fff' // 设置字体颜色为红色
      },
      data: ['原文数量', '存储量']
    },
    yAxis: [
      {
        type: 'value',
        name: '原文数量/件',
        position: 'left',
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0]
          }
        },
        axisLabel: {
          formatter: '{value}'
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },
      {
        type: 'value',
        name: '存储量/MB',
        position: 'right',
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[1]
          }
        },
        axisLabel: {
          formatter: '{value}'
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },

    ],
    series: [

      // 第二个y轴数据
      // 底部的椭圆形(象形柱图):pictorialBar
      // {
      //   type: "pictorialBar", // pictorialBar(象形柱图)
      //   label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
      //     show: true, //是否显示标签
      //     position: ['10', '-30'], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
      //     color: '#01E4FF',
      //     fontSize: 14
      //   },
      //   symbolSize: [4, 2], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
      //   symbolOffset: [0, 10], // 图形相对于原本位置的偏移
      //   z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
      //   itemStyle: { // 图形样式
      //     // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
      //     // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       // 这里 offset: 0 1 ,表示从下往上的渐变色
      //       {
      //         offset: 0, // 0%处的颜色
      //         color: "rgba(31,155,255,1)"
      //       },
      //       {
      //         offset: 1, // 100%处的颜色
      //         color: "rgba(0,229,255,1)"
      //       }
      //     ])
      //   }, yAxisIndex: 1,
      //   data: edrmsTypeAndStorage.map(item => item.fileCount)
      // },
      // 中间的长方形柱状图(柱状图):bar
      {
        type: 'bar', // 柱状图
        barWidth: 10, // 柱条的宽度,不设时自适应
        barGap: '3%', // 柱子与柱子之间的距离
        itemStyle: { // 图形样式
          // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
          // 下面就是使用线性渐变
          color: {
            "x": 0,
            "y": 0,
            "x2": 0,
            "y2": 1,
            "type": "linear",
            "global": false,
            "colorStops": [{
              "offset": 0, // 0%处的颜色
              "color": "rgba(0,229,255,0.5)"
            }, {
              "offset": 1, // 100%处的颜色
              "color": "#1E90FF"
            }]
          }
        },
        yAxisIndex: 0,
        name: '原文数量',
        data: edrmsTypeAndStorage.map(item => item.fileCount)
      },
      // // 顶部的椭圆形(象形柱图):pictorialBar
      // {
      //   type: "pictorialBar",
      //   symbolSize: [4, 2],
      //   symbolOffset: [0, -10],
      //   z: 12,
      //   symbolPosition: "end",
      //   itemStyle: {
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: "rgba(31,155,255,1)"
      //       },
      //       {
      //         offset: 1,
      //         color: "rgba(0,229,255,1)"
      //       }
      //     ], false)
      //   }, yAxisIndex: 1,
      //   data: edrmsTypeAndStorage.map(item => item.fileCount)
      // },







      // 第一个Y轴的数据
      // {
      //   type: "pictorialBar", // pictorialBar(象形柱图)
      //   label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
      //     show: true, //是否显示标签
      //     position: ['10', '-5'], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
      //     color: '#01E4FF',
      //     fontSize: 14
      //   },
      //   symbolSize: [10, 5], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
      //   symbolOffset: [0, 5], // 图形相对于原本位置的偏移
      //   z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
      //   itemStyle: { // 图形样式
      //     // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
      //     // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       // 这里 offset: 0 1 ,表示从下往上的渐变色
      //       {
      //         offset: 0, // 0%处的颜色
      //         color: "rgba(31,155,255,1)"
      //       },
      //       {
      //         offset: 1, // 100%处的颜色
      //         color: "rgba(0,229,255,1)"
      //       }
      //     ])
      //   },
      //   yAxisIndex: 0, name: '存储量',
      //   data: edrmsTypeAndStorage.map(item => item.storge)
      // },
      // 中间的长方形柱状图(柱状图):bar
      {
        type: 'bar', // 柱状图
        barWidth: 10, // 柱条的宽度,不设时自适应
        barGap: '10%', // 柱子与柱子之间的距离
        itemStyle: { // 图形样式
          // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
          // 下面就是使用线性渐变
          color: {
            "x": 0,
            "y": 0,
            "x2": 0,
            "y2": 1,
            "type": "linear",
            "global": false,
            "colorStops": [{
              "offset": 0, // 0%处的颜色
              "color": "#83fc83"
            }, {
              "offset": 1, // 100%处的颜色
              "color": "#00ff00"
            }]
          }
        },
        name: '存储量',
        yAxisIndex: 1,
        data: edrmsTypeAndStorage.map(item => item.storge)
      },


    ]



  };
  useEffect(() => {
    let chart: any = null;
    if (chartRef.current) {
      // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
      chart = echarts.init(chartRef.current);
      // 设置图表实例的配置项和数据
      option && chart.setOption(option);
    }
    return () => {

      //  销毁实例。实例销毁后无法再被使用
      chart.dispose();
    };
  }, [edrmsTypeAndStorage]);
  return (
    <EdrmsTypeAndStorageStyled>
      <div ref={chartRef} style={{ width: '100%', height: '100%' }}>
      </div>

    </EdrmsTypeAndStorageStyled>
  );
};

export default EdrmsTypeAndStorage;
